<template>
  <div class="content">
    <video-player class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        @play="history"
        :options="playerOptions">
    </video-player>
      <div class="title">{{title}}</div>
      <div class="desclist">
          <span class="desc">{{desc}}</span>
          <ul>
             <li v-for="item in listMes" :key="item">{{item}}</li>
          </ul>
          <span class="detail" @click="descShow">简介</span>
          <router-link to="/message">留言报错</router-link>
      </div>
      <div v-show="isShow">
          <movie-desc :introduce="introduce" :src="descImg"></movie-desc>
      </div>  
      <div class="resource">
          <resource-list :videoResource="videoResource" @refesh="refesh" :way="way"></resource-list>
      </div>
      <div class="recommend">
          <div class="title">猜你喜欢</div>
          <div class="list">
              <v-list :isDetial="false" :isHome="false"  :Data="list" ></v-list>
          </div>
      </div>
      <div class="loading" v-if="isLoading">
    <van-loading size="50px" type="spinner" />
    </div>
  </div>
</template>

<script>
import ResourceList from '../components/ResourceList.vue';
import { reactive, toRefs } from '@vue/reactivity';
import VList from '../components/List.vue' 
import { onMounted } from '@vue/runtime-core';
import { useRouter } from 'vue-router'
import axios from 'axios';
import MovieDesc from '../components/MovieDesc.vue' 
export default {
    components:{
        "v-list":VList,
        "resource-list":ResourceList,
        "movie-desc":MovieDesc,
    },
    setup(){
        const router = useRouter()
         const state = reactive({
            list:[],
            isShow:false,
            videoSrc:'',
            title:'',
            introduce:[],
            descImg:'',
            desc:'',
            listMes:'',
            videoResource:{},
            way:[],
            historyData:[],
            playerOptions: {
                    //播放速度
                    playbackRates: [0.5, 1.0, 1.5, 2.0], 
                    //如果true,浏览器准备好时开始回放。
                    autoplay: false, 
                    // 默认情况下将会消除任何音频。
                    muted: false, 
                    // 导致视频一结束就重新开始。
                    loop: false, 
                    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    preload: 'auto', 
                    language: 'zh-CN',
                     // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    aspectRatio: '16:9',
                     // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    fluid: true,
                    sources: [{
                        //类型
                        type: "video/mp4",
                        //url地址
                        src: '' 
                    }],
                    //你的封面地址
                    poster: '', 
                     //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        //全屏按钮
                        fullscreenToggle: true  
                    }
            },
            isLoading:true
        })
        const descShow = ()=>{
            state.isShow = !state.isShow
        }
        onMounted(()=>{
            refesh()
        })
        const refesh = (id)=>{
            console.log(id);
            if (id===undefined) {
                id = 0
            }
            let href = router.currentRoute.value.params.id
            console.log(href);
            axios.get(`/api/play/${href}`).then(res=>{
                console.log(res.data);
                console.log(res.data.videosrc[id]);
                state.playerOptions.sources[0].src = res.data.videosrc[id]
                state.introduce = res.data.introduce 
                state.descImg = res.data.descImg
                state.title = res.data.title
                state.list = res.data.list
                state.desc = res.data.desc
                state.listMes = res.data.listMes
                state.way = res.data.way
                state.videoResource = res.data.videoResource
                state.isLoading = false
            })
        }
        const  history = async ()=>{
            let href = router.currentRoute.value.params.id

            let data = await localStorage.getItem('movietitle')
            if (data!==null) {
                console.log(JSON.parse(data));
                state.historyData = JSON.parse(data)
            }
            if (state.historyData.find(v => v.title === state.title)===undefined) {
                let MovieData = {
                    href:href,
                    title:state.title
                }
                state.historyData.push(MovieData)
                await localStorage.setItem('movietitle',JSON.stringify(state.historyData))
            }
        }
        return{
            ...toRefs(state),
            descShow,
            refesh,
            history
        }
    }
}
</script>

<style lang="less" scoped>
.content{
    .title{
        font-size: 22px;
        margin-left: 20px;
        line-height: 38px
    }
    .desclist{
        margin-left: 20px;
        padding-top: 4px;
        display: flex;
        font-size: 12px;
        line-height: 12px;
        .desc{
            color: #FF3D00;
            font-weight: 700
        }
        ul{
            display: flex;
            li{
                margin-left: 6px;
                padding-left: 6px;
                border-left: 1px solid #666;
            }
        }
        .detail{
            margin-left: 10px;
            text-decoration:underline;
        }
        a{
             margin-left: 10px;
             text-decoration:underline
        }
    }
    
    color: #fff;
    .resource{
        position: relative;
        margin: 20px;
    }
    .recommend{
        .title{
            font-size: 18px;
            color: #fff;
            font-weight: 700;
            margin-left: 20px;
        }
        .list{
            margin-top: 40px;
        }
    }
    .loading{
    position: fixed;
    top: calc(50vh - 25px);
    left: calc(50vw - 25px);
}
}
</style>